import { defineStore } from 'pinia'
import { nextTick } from 'vue'
const useHomeStore = defineStore('home', {
    state: () => ({
        show: false,
        gameType: '',
        seo: {
            title: '封神幻想世界',
            desc: '我是封神幻想世界哦，了解一下',
            kwd: '封神,幻想,世界',
            imgIcon: 'https://static.leiting.com/images/common/share_icon.jpg'
        },
        navInfo: {
            logo: '//ossstatic.leiting.com/static/game/images/xian_icon.png',
            title: '封神幻想世界',
            desc: '定位语写点什么好呢',
            navList: [
                {
                    name: '官网首页',
                    href: '/fenshen'
                },
                {
                    name: '新闻资讯',
                    href: 'https://game.leiting.com/list/shenzhou'
                },
                {
                    name: '攻略中心',
                    href: 'https://wd.leiting.com/strategy'
                },
                {
                    name: '玩家社区',
                    href: 'https://bbs.leiting.com/'
                }
            ],
        },
        sideNavList: [
            {
                name: '首页',
                id: 'page-index',
                img: '//ossstatic.leiting.com/test/testimg/fshxsj/images/nav-0.png',
                imgActive: '//ossstatic.leiting.com/test/testimg/fshxsj/images/nav-0-active.png',
            },
            {
                name: '新闻中心',
                id: 'page-news',
                img: '//ossstatic.leiting.com/test/testimg/fshxsj/images/nav-2.png',
                imgActive: '//ossstatic.leiting.com/test/testimg/fshxsj/images/nav-0-active.png',
            },
            {
                name: '封神宝库',
                id: 'page-applet',
                img: '//ossstatic.leiting.com/test/testimg/fshxsj/images/nav-1.png',
                imgActive: '//ossstatic.leiting.com/test/testimg/fshxsj/images/nav-1-active.png',
            },
            {
                name: '封神图鉴',
                id: 'page-picture',
                img: '//ossstatic.leiting.com/test/testimg/fshxsj/images/nav-3.png',
                imgActive: '//ossstatic.leiting.com/test/testimg/fshxsj/images/nav-0-active.png',
            },
            {
                name: '封神万象',
                id: 'page-selling',
                img: '//ossstatic.leiting.com/test/testimg/fshxsj/images/nav-4.png',
                imgActive: '//ossstatic.leiting.com/test/testimg/fshxsj/images/nav-0-active.png',
            }
        ],
        sideFloat: {
            bg: '//ossstatic.leiting.com/test/testimg/fshxsj/images/side-float.png',
            switchOpen: '//ossstatic.leiting.com/test/testimg/fshxsj/images/flo-open.png',
            switchClose: '//ossstatic.leiting.com/test/testimg/fshxsj/images/flo-close.png',
            qrData: 'https://xian.leiting.com/',
            qrLineImg: '//ossstatic.leiting.com/test/testimg/fshxsj/images/scanning-line.png',
            qrText: '扫一扫，加入官方社群',
            actIcon: [
                {
                    img: '//ossstatic.leiting.com/test/testimg/fshxsj/images/bilibili-icon.png',
                    imgHover: '//ossstatic.leiting.com/test/testimg/fshxsj/images/bilibili-icon-hover.png',
                    href: 'https://xian.leiting.com/',
                    title: '一念逍遥',
                },
                {
                    img: '//ossstatic.leiting.com/test/testimg/fshxsj/images/bilibili-icon.png',
                    imgHover: '//ossstatic.leiting.com/test/testimg/fshxsj/images/bilibili-icon-hover.png',
                    href: 'https://wd.leiting.com/',
                    title: '问道手游',
                },
                {
                    img: '//ossstatic.leiting.com/test/testimg/fshxsj/images/bilibili-icon.png',
                    imgHover: '//ossstatic.leiting.com/test/testimg/fshxsj/images/bilibili-icon-hover.png',
                    href: 'https://aobi.leiting.com/',
                    title: '奥比岛手游',
                },
                {
                    img: '//ossstatic.leiting.com/test/testimg/fshxsj/images/bilibili-icon.png',
                    imgHover: '//ossstatic.leiting.com/test/testimg/fshxsj/images/bilibili-icon-hover.png',
                    href: 'https://xzysd.leiting.com/',
                    title: '新庄园时代',
                },
                {
                    img: '//ossstatic.leiting.com/test/testimg/fshxsj/images/bilibili-icon.png',
                    imgHover: '//ossstatic.leiting.com/test/testimg/fshxsj/images/bilibili-icon-hover.png',
                    href: 'https://lqs.leiting.com/',
                    title: '飞吧!龙骑士',
                }
            ]
        },
        videoSrc: '//ossstatic.leiting.com/static/shenzhou/202401/video/0130.mp4',
        popImgSrc: '//ossstatic.leiting.com/test/testimg/fshxsj/images/pop.png',
        bg: '//ossstatic.leiting.com/test/testimg/fshxsj/images/bg.jpg',
        pageIndex: {
            video: {
                img: '//ossstatic.leiting.com/test/testimg/fshxsj/images/btn-video.png',
                videoSrc: '//ossstatic.leiting.com/static/xian/202012/video/index-bg.mp4',
            },
            make: {
                img: '//ossstatic.leiting.com/test/testimg/fshxsj/images/btn-make.png',
            },
            floReward: [
                {
                    img: '//ossstatic.leiting.com/test/testimg/fshxsj/images/flo-reward.png',
                    style: 'width: 1.72rem; top: 6.38rem; left: 5.86rem;'
                },
                {
                    img: '//ossstatic.leiting.com/test/testimg/fshxsj/images/flo-reward.png',
                    style: 'width: 1.72rem; top: 7.33rem; left: 7.44rem;'
                },
                {
                    img: '//ossstatic.leiting.com/test/testimg/fshxsj/images/flo-reward.png',
                    style: 'width: 1.72rem; top: 7.64rem; left: 9.09rem;'
                },
                {
                    img: '//ossstatic.leiting.com/test/testimg/fshxsj/images/flo-reward.png',
                    style: 'width: 1.72rem; top: 7.59rem; left: 10.82rem;'
                },
                {
                    img: '//ossstatic.leiting.com/test/testimg/fshxsj/images/flo-reward.png',
                    style: 'width: 1.72rem; top: 7.16rem; left: 12.52rem;'
                }
            ],
            arrow: '//ossstatic.leiting.com/test/testimg/fshxsj/images/arrow.png'
        },
        bgColor: '255,255,255,1',
        newList: [
            '我是一条新闻哦',
            '我是第二条新闻哦'
        ],
        contactUs: {},
        bannerList: [],
        pop: {
            popFlag: false,
            popNum: -1,
            videoSrc: ''
        }
    }),
    actions: {
        async getUserProfile() {
            this.show = true
            const locatPath = location.pathname.toString().split('/')
            this.isMobile() === 'true' ? this.gameType = locatPath[2] : this.gameType = locatPath[1] // 获取path上游戏标识
            console.log('当前地址游戏标识:', this.gameType, this.isMobile() === 'true' ? '移动端' : 'pc端'); // 打印当前路由路径
            nextTick(() => {
                this.updateNavLinks() // 初始化触发导航高亮
            })
            // const { homeApi } = useApi()
            // const res = await homeApi.getBasicInfo({ lang: 'en' })
            // console.log(res)
            // this.bannerList = res.config.bannerList
            // this.contactUs = res.config.contactUs
        },
        // 校验设备是否是移动端
        isMobile() {
            const userAgent = process.server ? useRequestHeaders()['user-agent'] ?? '' : navigator.userAgent
            return String(/mobile/i.test(userAgent))
        },
        // 检查元素是否在可视区域内
        isInViewport(element: Element) {
            const rect = element.getBoundingClientRect() // 获取页面中某个元素的左上右下分别相对浏览器视口的位置
            const topBoundary = window.pageYOffset || document.documentElement.scrollTop // 窗口已滚动的距离
            const elementTop = rect.top + topBoundary
            // console.log(topBoundary, elementTop - 205)
            return topBoundary >= elementTop - 205
        },
        // 更新导航链接的高亮状态
        updateNavLinks() {
            // 假设你的导航链接和内容区域都有对应的类或者ID
            const sections = document.querySelectorAll('.section') // 内容区域的选择器
            const navLinks = document.querySelectorAll('.nav-link') // 导航链接的选择器
            let currentSectionId = ''
            sections.forEach(section => {
                if (this.isInViewport(section)) {
                    currentSectionId = section.id
                }
            })
            navLinks.forEach(navLink => {
                if (navLink.getAttribute('data-target') === `#${currentSectionId}`) {
                    navLink.classList.add('active')
                } else {
                    navLink.classList.remove('active')
                }
            })
        },
        // 滚动到指定锚点
        scrollToAnchor(id: string) {
            const element = document.getElementById(id)
            if (element) {
                element.scrollIntoView({ behavior: 'smooth' })
            }
        },
        // 弹窗
        handlePop(num: number) {
            this.pop.popNum = num
            this.pop.popFlag = true
            if(num === 0) {
                this.pop.videoSrc = this.videoSrc
                const videoElement = document.getElementById('video') as HTMLMediaElement
                nextTick(() => {
                    videoElement.play()
                })
            }
        },
        // 关闭弹窗
        handleClosePop() {
            this.pop.popNum = -1
            this.pop.popFlag = false
            this.pop.videoSrc = ''
        }
    },
    getters: {}
})

export default useHomeStore
